<template>
  <a-layout>
    <a-layout-content>
      <a-row type="flex" justify="center">
        <a-col :span="24">
<!--            <a-row type="flex" justify="center" class="top-row">
            <a-col :span="2"
                   v-for="title in titleCol"
                   :offset="1"
                   class="first-row-col"
                   :key="title">
              {{ title }}
            </a-col>
            </a-row>
          <a-row v-for="(row,index) in secondRow" :key="index" type="flex" justify="center">
            <a-col :span="2"
                   v-for="(item,index) in row"
                   :offset="1"
                   class="second-row-col"
                   :key="index">
              {{ item.val }}
            </a-col>
          </a-row>-->
          <a-row class="bottom-row" type="flex" justify="center">
            <a-col :span="10" class="bottom-col">
              {{ bottomText }}
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      titleCol: ['公益服务', '便民服务', '农产品展示', '新经营主体', '培训课程', '农业物流'],
      secondRow: [
        [
          {url: '', val: '- 法律快车'},
          {url: '', val: '- 快递查询'},
          {url: '', val: '- 绿色产品'},
          {url: '', val: '- 信息化服务'},
          {url: '', val: '- 种植'},
          {url: '', val: '- 快递/物流信息'}
        ],
        [
          {url: '', val: '- 轻松筹'},
          {url: '', val: '- 加油卡充值'},
          {url: '', val: '- 有机产品'},
          {url: '', val: '- 法律法规'},
          {url: '', val: '- 专家在线'},
          {url: '', val: '- 人人快递'}
        ],
      ],
      bottomText: '中国联合网络通信有限公司山西省分公司 晋ICP备050000576号-25'
    }
  }
};
</script>

<style lang="scss" scoped>
.footer-row {
  margin-top: 3em;
  height: 19em;
  background-color: rgba(0, 171, 93, 1);
  .top-row {
    margin-top: 2em;
    height: 5em;
  }
}

.bottom-row {
  color: white;
  height: 4em;
  //background-color: rgba(6, 149, 85, 0.7);
  background-color: rgba(4, 156, 88, 1);
  position: relative;
  top: 3em;
  bottom: 0;
  .bottom-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.first-row-col {
  color: white;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
}

.second-row-col{
  color: white;
  font-size: 1em;
  height: 2.5em;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
}

</style>
